<script setup lang="ts">
import { getApi } from '@/apis'
import { usePoetry } from '@/utils/UsePoetry'

const userInfo = useUserStore()
console.log('userInfo', userInfo.realName)

// set state      userInfo.$state = userInfo
// set state      userInfo.$patch({ ... })

const inputValue = ref('')

const { data, send, onSuccess, onError, onComplete } = useRequest(getApi, {
  // 初始化数据
  initialData: [],

  // 是否立即发起请求
  immediate: false,

  // 中间件
  async middleware(_, next) {
    console.log('before request', _)
    await next()
    console.log('after requeste', _)
  }
})

onSuccess(() => {
  console.log('onSuccess', data.value)
})

onError(() => {
  console.log('onError', data.value)
})

onComplete(() => {
  console.log('onComplete', data.value)
})

const nowDate = dayjs().format('YYYY-MM-DD HH:mm:ss')

const timeageRef = useTemplateRef('timeageRef')

onMounted(async () => {
  await send()

  if (timeageRef.value) {
    timeagoRender(timeageRef.value, 'zh_CN')
  }
})

const iconStr = ref('i-tdesign-add-circle')

function changeIcon() {
  if (iconStr.value === 'i-tdesign-add-circle') {
    iconStr.value = 'i-tdesign-add-rectangle'
  } else {
    iconStr.value = 'i-tdesign-add-circle'
  }
}

const { poetryData } = await usePoetry()

onUnmounted(() => {
  console.log('onUnmounted')
})
</script>

<template>
  <n-spin>
    <div class="h-40px flex items-center justify-center bg-cyan-100">
      test
    </div>
    <!-- <template #icon>22</template> -->
  </n-spin>
  <button
    class="group test relative h-14 w-48 rounded-2xl bg-white text-center text-xl text-black font-semibold"
    type="button"
  >
    <div
      class="absolute left-1 top-[4px] z-10 h-12 w-1/4 flex items-center justify-center rounded-xl bg-green-400 duration-500 group-hover:w-[184px]"
    >
      <svg
        viewBox="0 0 1024 1024"
        height="25px"
        width="25px"
      >
        <path
          d="M224 480h640a32 32 0 1 1 0 64H224a32 32 0 0 1 0-64z"
          fill="#000000"
        />
        <path
          d="m237.248 512 265.408 265.344a32 32 0 0 1-45.312 45.312l-288-288a32 32 0 0 1 0-45.312l288-288a32 32 0 1 1 45.312 45.312L237.248 512z"
          fill="#000000"
        />
      </svg>
    </div>
    <p class="translate-x-2">
      Go Back
    </p>
  </button>

  <n-input v-model:value="inputValue" />
  {{ poetryData.author }}
  {{ inputValue }}
  {{ userInfo.realName }}
  <br />
  <span
    ref="timeageRef"
    :datetime="nowDate"
  />

  <div
    class="m-1 h-10 bg-red"
    hover:bg-pink
  >
    Unocss
  </div>

  <i
    class="i-local-vite text-[#ccc]"
    h-20px
    w-20px
  />
  <i-local-loading
    h-20px
    w-20px
  />
  <i class="i-ep-arrow-up hover:i-ep-arrow-down" />

  <i
    class="i-openmoji-artist-medium-skin-tone"
    h-30px
    w-30px
  />
  {{ dayjs().format('YYYY-MM-DD') }}
  <i
    :class="clsx('icon', iconStr)"
    @click="changeIcon"
  />

  <div class="custom-loader" />
</template>

<style scoped lang="scss">
.test {
  @apply text-red-500;
}

.custom-loader {
  width: 12px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #000;
  clip-path: inset(-220%);
  animation: l28 2s infinite linear;
}
@keyframes l28 {
  0%  {box-shadow:0 0 0 0   , 40px 0,-40px 0,0 40px,0 -40px}
  10% {box-shadow:0 0 0 0   , 12px 0,-40px 0,0 40px,0 -40px}
  20% {box-shadow:0 0 0 4px , 0px  0,-40px 0,0 40px,0 -40px}
  30% {box-shadow:0 0 0 4px , 0px  0,-12px 0,0 40px,0 -40px}
  40% {box-shadow:0 0 0 8px , 0px  0,  0px 0,0 40px,0 -40px}
  50% {box-shadow:0 0 0 8px , 0px  0,  0px 0,0 12px,0 -40px}
  60% {box-shadow:0 0 0 12px, 0px  0,  0px 0,0  0px,0 -40px}
  70% {box-shadow:0 0 0 12px, 0px  0,  0px 0,0  0px,0 -12px}
  80% {box-shadow:0 0 0 16px, 0px  0,  0px 0,0  0px,0  0px }
  90%,
  100%{box-shadow:0 0 0 0   , 40px 0,-40px 0,0 40px,0 -40px}
}
</style>
